---
name: Home
route: /
---

import logo from "../resources/resium.gif";
import screenshot from "../resources/screenshot.png";
import usage from "../resources/usage.gif";
import Button from "../components/Button";
import Center from "../components/Center";
import { Feature, FeatureWrapper, FeatureDesc } from "../components/Feature";
import TitleWithImg from "../components/TitleWithImg.tsx";

# Resium

<img src={logo} />

Resium is library of React components for 🌍[Cesium](https://cesiumjs.org/)

```jsx
<Viewer full>
  <Entity
    name="tokyo"
    description="test"
    position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
  />
</Viewer>
```

<img src={screenshot} />

<img src={usage} />

<Center>
  <Button to="https://github.com/darwin-education/resium">GitHub</Button>
  <Button to="/installation">Install</Button>
  <Button to="/getting_started">Getting Started</Button>
</Center>

<FeatureWrapper>
  <Feature>
    <TitleWithImg contents="🌏">Declarative Cesium</TitleWithImg>
    <FeatureDesc>
      Let's create a high maintainability Cesium application with React today!
    </FeatureDesc>
  </Feature>
  <Feature>
    <TitleWithImg contents="👨🏻‍💻">Blazing Fast Development</TitleWithImg>
    <FeatureDesc>
      Resium brings hot module replacement to Cesium, which dramatically improves your development
      speed!
    </FeatureDesc>
  </Feature>
  <Feature>
    <TitleWithImg contents="💪">Strongly Typed</TitleWithImg>
    <FeatureDesc>Resium fully supports TypeScript. Type definitions are built-in!</FeatureDesc>
  </Feature>
</FeatureWrapper>
